<script setup lang="ts">
import type { CopiedItemData } from '@/api/types/workflow'
import { onPullDownRefresh, onReachBottom, onShow } from '@dcloudio/uni-app'
import { getCopyPage } from '@/api/workflow'
import { getProcessDetailPath } from '@/hooks/useFlow'
import { useScroll } from '@/hooks/useScroll'

// 导入TodoCard组件
import TodoCard from './components/TodoCard.vue'

// 抄送我的事项数据类型适配
export interface CopiedItemAdapted {
  id: string // 用于跳转的ID
  name: string // 流程实例名称
  category?: string // 适配前端显示的类别
  publishTime?: string // 发布时间
  date?: string // 日期
  urgent?: boolean // 是否加急
  isProcessing?: boolean // 是否处理中
  path?: string // 用于跳转的路径
  status?: string // 状态
  processInstance?: any // 保持和TodoCard组件兼容的结构
}

// 格式化日期
function formatDate(dateString?: string, format = 'yyyy-MM-dd') {
  if (!dateString) {
    return ''
  }
  const date = new Date(dateString)

  // 根据format参数格式化日期
  return format
    .replace('yyyy', date.getFullYear().toString())
    .replace('MM', (date.getMonth() + 1).toString().padStart(2, '0'))
    .replace('dd', date.getDate().toString().padStart(2, '0'))
    .replace('HH', date.getHours().toString().padStart(2, '0'))
    .replace('mm', date.getMinutes().toString().padStart(2, '0'))
    .replace('ss', date.getSeconds().toString().padStart(2, '0'))
}

// 获取抄送我的列表数据
async function fetchCopiedList(page: number, pageSize: number): Promise<CopiedItemAdapted[]> {
  try {
    const res = await getCopyPage({
      currentPage: page,
      numPerPage: pageSize,
    })

    if (res.data?.list) {
      // 适配数据格式
      return res.data.list.map((item: CopiedItemData) => {
        // 处理状态显示
        const isProcessing = true // 抄送数据默认标记为处理中

        // 构建一个模拟的流程实例对象，以便getProcessDetailPath能正确处理
        const mockProcessInstance = {
          name: item.processInstanceName,
          id: item.processInstanceId,
        }

        return {
          id: item.processInstanceId, // 使用processInstanceId作为跳转ID
          name: item.processInstanceName,
          publishTime: item.processInstanceStartTime || '',
          date: item.processInstanceStartTime ? formatDate(item.processInstanceStartTime, 'yyyy-MM-dd') : '',
          status: '已抄送', // 抄送的状态固定为"已抄送"
          isProcessing,
          path: getProcessDetailPath(item.taskName, item.processInstanceId),
          processInstance: mockProcessInstance, // 保持和TodoCard组件兼容的结构
        }
      })
    }
    return []
  }
  catch (error) {
    console.error('获取抄送列表失败:', error)
    uni.showToast({
      title: '获取数据失败',
      icon: 'none',
    })
    return []
  }
}

// 使用useScroll钩子
const { list, loading, finished, error, refresh, loadMore } = useScroll<CopiedItemAdapted>({
  fetchData: fetchCopiedList,
  pageSize: 20,
})

// 导航到详情页
function navigateToDetail(path: string) {
  uni.navigateTo({
    url: path,
    fail: (err) => {
      console.error('导航失败:', err)
    },
  })
}

// 下拉刷新处理
onPullDownRefresh(async () => {
  await refresh()
  uni.stopPullDownRefresh()
})

// 上拉加载处理
onReachBottom(() => {
  if (!loading.value && !finished.value) {
    loadMore()
  }
})

// 页面加载时自动刷新数据
onShow(() => {
  refresh()
})

// 页面配置
definePage({
  style: {
    navigationBarTitleText: '抄送我的',
    enablePullDownRefresh: true,
    onReachBottomDistance: 100,
  },
})
</script>

<template>
  <view class="todo-container min-h-screen bg-slate-50 p-4 pb-20">
    <!-- 加载状态 -->
    <view v-if="loading && list.length === 0" class="loading-container mb-5 h-32 flex items-center justify-center">
      <view class="flex flex-col items-center">
        <view class="mb-3 h-8 w-8 animate-spin border-2 border-slate-200 border-t-primary rounded-full" />
        <text class="loading-text text-sm text-slate-500">加载中...</text>
      </view>
    </view>

    <!-- 列表 -->
    <view v-else-if="list.length > 0" class="todo-list flex flex-col gap-4">
      <TodoCard
        v-for="(item, index) in list"
        :key="item.id || index"
        :item="item"
        @click="navigateToDetail(item.path)"
      />

      <!-- 加载更多提示 -->
      <view v-if="loading && list.length > 0" class="py-4 text-center text-gray-500">
        <view class="mb-1 inline-block h-4 w-4 animate-spin border-2 border-slate-200 border-t-primary rounded-full" />
        <text class="text-sm">加载中...</text>
      </view>

      <!-- 没有更多数据提示 -->
      <view v-if="finished && list.length > 0" class="py-4 text-center text-gray-500">
        <text class="text-sm">没有更多了</text>
      </view>

      <!-- 加载错误提示 -->
      <view v-if="error" class="py-4 text-center text-red-500">
        <text class="text-sm">加载失败，请重试</text>
      </view>
    </view>

    <!-- 空状态 -->
    <view v-else class="h-60 flex flex-col items-center justify-center empty-container">
      <view class="mb-4 h-20 w-20 flex items-center justify-center rounded-full bg-slate-100">
        <i class="i-solar:bell-bing-broken text-slate-400" size="36" />
      </view>
      <text class="empty-text text-base text-slate-500">暂无抄送事项</text>
      <text class="empty-subtext mt-2 text-sm text-slate-400">您还没有收到抄送的审批</text>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.todo-container {
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
}

/* 加载动画 */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

/* 响应式设计 */
@media (min-width: 768px) {
  .todo-container {
    max-width: 640px;
    margin: 0 auto;
    padding: 20px;
  }
}

/* 优化按钮点击效果 */
button {
  &::after {
    border: none;
  }
}
</style>
